<script>

import KtTableSaveOfTypeIsText
  from "/src/components/node-kantboot/components/KtTable/InSaveComponents/KtTableSaveOfTypeIsText.vue";

export default {
  components: {KtTableSaveOfTypeIsText},
  props: {
    column:{
      type: Object,
      default: ''
    },
    value: {
      type: Object,
      default: ''
    },
    /**
     * 用于控制当前行的状态
     * view: 查看状态
     * edit: 编辑状态
     */
    rowStatus: {
      type: String,
      default: 'view'
    },
  },
  data() {
    return {
      valueData: ""
    }
  },
  mounted() {
  },
  methods: {
    // 对column进行处理
    newColumn(column) {
      // 如果column.textSetting不存在，就给它赋值一个空对象
      if (!column.setting) {
        column.setting = {}
      }
      return column
    },
    change(value) {
      this.$emit('change', value)
    }
  },
  watch: {
    // 监听value的变化
    value: {
      handler(val) {
        this.valueData = val;
      },
      immediate: true
    },
    rowStatus(val) {
        this.valueData = this.value;
        if(this.rowStatus==='edit'&&this.column?.isEdit){
          if(this.valueData){
            setTimeout(()=>{
              this.$refs.saveComponent.valueData = this.valueData;
            },100);
          }
        }
    },

  }
}
</script>

<template>
  <div v-if="rowStatus==='view'||!column?.isEdit">
    <div v-if="valueData">
    <span class="pa-span">
      {{ newColumn(column).setting.prefix }}
    </span>
      <span class="text-value">
      {{ value }}
    </span>
      <span class="pa-span">
      {{ newColumn(column).setting.suffix }}
    </span>
    </div>
  </div>
  <div v-if="rowStatus==='edit'&&column?.isEdit">
      <kt-table-save-of-type-is-text
      :column="column"
      ref="saveComponent"
      @change="change"
      ></kt-table-save-of-type-is-text>
  </div>
</template>

<style lang="scss" scoped>
@import "../../../index";

.text-value {
  margin: 0 5px 0 5px;
  // 操过三行显示省略号
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  text-overflow: ellipsis;
}


</style>